<template>
  <div class="c-bg-sgray c-p">
    <template v-if="detailType == 1">
      <new-search-bar :searchText="searchName" :placeholder="'请输入用户昵称'" @search='startSearchCustomer' @clear="startSearchCustomer" @cancel='startSearchCustomer' bgSearch="c-bg-white"></new-search-bar>
      <div class="c-ph24">
        <div v-for="(item, index) in detailList" :key="index" class="c-ph20 c-fs20 c-pb30 c-mt20 c-br10 c-bg-white">
          <div class="c-flex-row c-pt20 c-pb20 c-bd-b1">
            <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="" class="c-hh80 c-ww80 c-brp50">
            <div class="c-w100">
              <div class="c-flex-row">
                <span class="c-pl20 c-fw-b c-text-ellipsis1 c-lh40" :class="item.vipType==1 ? 'maxw360' : item.vipType==2 || item.vipType==4 ? 'maxw400' : 'c-maxw200'">{{item.nickname}}</span>
                <identity-com class="c-pl10" :vipType="item.vipType"></identity-com>
              </div>
              <div class="c-flex-row c-justify-sb c-100 c-pl20 c-fc-gray">
                <div class=" c-pr20">
                  <div class="c-pt20">ID: {{item.userId}}</div>
                  <div class="c-text-ellipsis1 c-pt20">姓名: {{!!item.realName ? item.realName : "--"}}</div>
                  <!-- <div class="c-pt20" v-if="type == 0 || (type==1 && teamInfo.enableLookIndirectMobile) || (item.mobile != -1 && type>=2)">电话: {{!!item.mobile ? item.mobile : '--'}}</div> -->
                  <div class="c-pt20">电话: {{!!item.mobile ? item.mobile : "--"}}</div>
                  <!-- <div class="c-pt20">注册时间: {{item.createdAt}}</div> -->
                  <div class="c-pt20">绑定时间: {{item.bindAt}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-justify-sb c-w100 c-pt20 c-ph12">
            <div class="c-flex-shrink0 c-flex-column c-aligni-center">
              <div class="c-fs20 c-fc-gray">累计消耗名额</div>
              <div class="c-fs20 c-fc-xblack c-fw600 c-mt8">{{item.consumeQuota ? Number(item.consumeQuota).toFixed(0) : 0}}个</div>
            </div>
            <div class="c-flex-shrink0 c-flex-column c-aligni-center">
              <div class="c-fs20 c-fc-gray">累计消耗金额</div>
              <div class="c-fs20 c-fc-xblack c-fw600 c-mt8">{{'￥' | iosPriceFilter}}{{item.consumeMoney}}</div>
            </div>
            <div class="c-flex-shrink0 c-flex-column c-aligni-center">
              <div class="c-fs20 c-fc-gray">累计收益</div>
              <div class="c-fs20 c-fc-xblack c-fw600 c-mt8">{{'￥' | iosPriceFilter}}{{item.staffIncome}}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="detailType == 2">
      <div class="c-bg-white c-flex-row c-aligni-center">
        <div class="c-flex-row c-aligni-center c-fs20 c-fc-gray c-p c-pl24 c-pr32">
          <popup-picker :data="searchTypeData" v-model="searchType" value-text-align="left" class=""></popup-picker>
          <span class="iconfont c-fs18 c-fc-sgray c-pa c-p-r0">&#xe6a9;</span>
        </div>
        <new-search-bar class="c-w0 c-flex-grow1" :searchText="searchName" @search='startSearchIncom' @cancel='startSearchIncom' @clear='startSearchIncom' bgSearch="c-bg-white"></new-search-bar>
      </div>
      <div class="c-ph24 c-flex-row c-aligni-center c-justify-sb c-bg-white">
        <my-small-tabbar :tabList="orderTabList" :tabIndex="tabIndex" :tabHeight="'60'" :flexClass="'c-justify-sb'" :fontSet="{defaultColor:'c-fc-gray c-fs26', activeColor:'c-fc-xblack fs20'}" @changeTab="changeTab" class="c-ww280"></my-small-tabbar>
        <div class="c-flex-row c-aligni-center c-fs20 c-fc-gray c-p c-pr32">
          <popup-picker :data="durationData" v-model="durationType" value-text-align="right" class="" @on-change="changeDurationType"></popup-picker>
          <span class="iconfont c-fs18 c-fc-sgray c-pa c-p-r0">&#xe6a9;</span>
        </div>
      </div>
      <div class="c-fs24 c-fc-gray c-pt24 c-pb20 c-ph24">消耗额度：{{getStaffPromoteInfo.payMoney}}元,收益{{getStaffPromoteInfo.staffIncome}}元,数据只统计到昨天24点</div>
      <div class="c-ph24">
        <div v-for="(item, index) in detailList" :key="index" class="c-ph24 c-pv24 c-bg-white c-br2 c-mb20 c-p c-mb20 c-br10">
          <div class="c-fs22 c-fc-gray">订单号：{{item.orderNo}}</div>
          <div class="c-flex-row c-aligni-center c-mt12">
            <img class="c-ww60 c-hh60 c-brp50" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="">
            <div class="c-fs24 c-fc-xblack c-fw600 c-w0 c-flex-grow1 c-ml12">{{item.nickname ? (item.nickname.length > 10 ? (item.nickname.substring(0, 10) + '...') : item.nickname) : ''}}</div>
            <div class="c-fs20 c-fc-gray">所属订货商：<span>{{item.aNickname ? (item.aNickname.length > 10 ? (item.aNickname.substring(0, 10) + '...') : item.aNickname) : ''}}</span></div>
          </div>
          <div class="c-flex-row c-mt20">
            <div class="c-ww180 c-hh120 c-text-hidden c-br12">
              <img class="c-w100 c-br12" :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" alt="">
            </div>
            <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.prodName}}</div>
              <div class="c-fs24 c-fc-gray">收益：<span class="theme-fc">{{'￥' | iosPriceFilter}}{{item.staffIncome}}</span></div>
              <div class="c-fs20 c-fc-gray" v-if="!$isWxAppIos()">{{'￥' | iosPriceFilter}}{{item.payMoney}}<span v-if="item.payAt" class="c-ph12">|</span><span v-if="item.payAt">{{item.payAt}}</span>购买</div>
            </div>
          </div>
          <img v-if="item.status == 1" class="c-pa c-p-t0 c-p-r0 c-ww64 c-hh64" :src="$addXossFilter(require('@/assets/i/wap/common/settle.png'))" alt="">
          <img v-if="item.status == 2" class="c-pa c-p-t0 c-p-r0 c-ww64 c-hh64" :src="$addXossFilter(require('@/assets/i/wap/common/unfixd.png'))" alt="">
        </div>
      </div>
    </template>
    <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (detailList && detailList.length > 0)" :noData="!detailList || detailList.length == 0" :noDataText="'暂无数据'"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import mySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import identityCom from "@/components/templates/common/identityCom.vue";
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index';
import { utilJs } from "@/utils/common.js"
let limit = 10;
export default {
  name: 'StaffDetail',
  components: {
    newSearchBar,
    PopupPicker,
    mySmallTabbar,
    loadingStatusTem,
    identityCom
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      searchText: '',
      detailType: 1,
      searchTypeData: [['搜索商品', '搜索购买者ID']],
      searchType: ['搜索商品'],
      orderTabList: [{
        title: '全部',
        index: 0,
      }, {
        title: '已结算',
        index: 1,
      }, {
        title: '待结算',
        index: 2,
      }],
      tabIndex: 0,
      durationData: [['本月', '上个月', '今年', '累计']],
      durationType: ['本月'],
      page: 1,
      is_page: false,
      isLoading: false,
      searchName: '',
      orderStatus: 0,
      detailList: [],
      getStaffPromoteInfo: '',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isAgent: '', // 从服务商金额管理过来的判断服务商
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    goMicroPage(mId) {
      this.$routerGo(this, "push", { path: "/homePage/microPage/microPage", query: {'mId': mId, 'isPromotedAccount': 1} });
    },
    startSearchCustomer(e) {
      this.page = 1;
      this.is_page = false;
      this.isLoading = false;
      this.searchName = e.searchValue;
      this.detailList = [];
      this.getMoreCustomer();
    },
    getMoreCustomer() {
      if (this.isLoading)
        return;
      this.isLoading = true;
      utilJs.getMethod(global.apiurl + 'Agent/getStaffCustomer?nickname=' + this.searchName + '&page=' + this.page + '&limit=' + limit, res => {
        this.isLoading = false;
        this.detailList = this.detailList.concat(res.data);
        this.page = res.data && (res.data.length >= limit) ? (this.page + 1) : this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
        this.is_page = res.data && (res.data.length >= limit) ? true : false;//res.current_page < res.last_page ? true : false;
      }, failRes => {
        this.isLoading = false;
      });
    },
    changeDurationType() {
      this.page = 1;
      this.is_page = false;
      this.isLoading = false;
      this.detailList = [];
      this.getMoreOrders();
    },
    changeTab(type) {
      this.tabIndex = type;
      this.page = 1;
      this.is_page = false;
      this.isLoading = false;
      this.detailList = [];
      this.orderStatus = type;
      this.getMoreOrders();
    },
    startSearchIncom(e) {
      this.page = 1;
      this.is_page = false;
      this.isLoading = false;
      this.searchName = e.searchValue;
      this.detailList = [];
      this.getMoreOrders();
    },
    getMoreOrders() {
      if (this.isLoading)
        return;
      this.isLoading = true;
      let searchNameType = this.searchType[0] == '搜索购买者ID' ? 2 : 1;
      let timeType = this.durationType[0] == '本月' ? 1 : this.durationType[0] == '上个月' ? 2 : this.durationType[0] == '今年' ? 3 : 0;
      utilJs.getMethod(global.apiurl + 'Agent/getStaffPromoteOrders?name=' + this.searchName + '&page=' + this.page + '&limit=' + limit + '&status=' + this.orderStatus + '&searchType=' + searchNameType + '&timeType=' + timeType + '&isAgent=' + this.isAgent, res => {
        this.isLoading = false;
        this.getStaffPromoteInfo = res;
        this.detailList = this.detailList.concat(res.data && res.data.data ? res.data.data : []);
        this.page = res.data && res.data.data && (res.data.data.length >= limit) ? (this.page + 1) : this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
        this.is_page = res.data && res.data.data && (res.data.data.length >= limit) ? true : false;//res.current_page < res.last_page ? true : false;
      }, failRes => {
        this.isLoading = false;
      });
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          if (that.detailType == 1) {
            that.getMoreCustomer();
          } else if (that.detailType == 2) {
            that.getMoreOrders();
          }
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = this.detailType == 1 ? "客户管理" : "业绩管理";
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.detailType == 1 ? "客户管理" : "业绩管理";
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    }
  },
  activated() {
    this.page = 1;
    this.is_page = false;
    this.isLoading = false;
    this.searchName = '';
    this.searchType = ['搜索商品'];
    this.durationData = [['本月', '上个月', '今年', '累计']];
    this.durationType = ['本月'];
    this.orderStatus = 0;
    this.detailList = [];
    this.getStaffPromoteInfo = '';
    this.detailType = this.$route.query.type || 1;
    this.isAgent = this.$route.query.isAgent || '';
    if (this.detailType == 1) {
      this.getMoreCustomer();
    } else if (this.detailType == 2) {
      this.getMoreOrders();
    }
    setDocumentTitle(this.detailType == 1 ? "客户管理" : "业绩管理");// eslint-disable-line
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    this.durationData = [['本月', '上个月', '今年', '累计']];
    this.durationType = ['本月'];
    window.addEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.staff-page-bg {
  background-image: linear-gradient(180deg, #3B457B 0%, #2B325C 100%);
}
.staff-content-bg {
  width: 100%;
  height: 19.6rem;
  padding-top: 5.2rem;
  background: url('../../../assets/i/wap/newAreaAgent/inviteStaff.png') no-repeat left top;
  background-size: 100% 100%;
}
.fc-B38E5B {
  color: #B38E5B;
}
.fc-330000 {
  color: #330000;
}
.dialog-demo /deep/ .weui-dialog {
  border-radius: 0.5rem;
}
.bg-top {
  background: rgba(0, 0, 0, 0.5);
}
.top-img {
  min-height: 7.5rem;
  /* filter: blur(2px); */
}
.bd1-white {
  border: 1px solid #fff;
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.backdropFilter2 {
  backdrop-filter: blur(3px);
}
.vux-cell-box >>> .vux-popup-picker-value {
  color: #999 !important;
  font-size: 0.6rem !important;
}
</style>